<template>
  <div id="container"
       class="map-container"></div>
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs, watch } from 'vue'
import { addOverlay, removeOverlay } from './public/layer'
import pic from '/@/assets/point.png'
import data from '/@/assets/data.json'
import { BMPGL } from '/@/bmpgl'

export default defineComponent({
  name: 'Map',
  props: {
    inters: {
      type: Array,
      default: () => {
        ;[]
      },
    },
  },
  setup(props) {
    const state = reactive({
      ak: 'IMSqvrji0t6o4g7B8vSb4ZFZ',
      map: null,
      points: data.data,
      circle: null,
      marker: null,
      infoWindow: null,
    })

    onMounted(() => {
      methods.initMap()
    })

    /**
     * @Description 监听路口数据变化，重新绘制点
     * @date 2021-03-08
     * @param {any} (
     * @returns {any}
     */
    watch(
      () => props.inters,
      () => {}
    )

    const methods = {
      initMap() {
        BMPGL(state.ak).then((MapGL: any) => {
          state.map = new MapGL.Map('container')
          const point = new MapGL.Point(118.876049, 31.931099)

          state.map.centerAndZoom(point, 14) // 设置地图中心点
          state.map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放

          //   state.map.setHeading(100) //设置地图旋转角度
          //   state.map.setTilt(100) //设置地图的倾斜角度

          methods.marker(MapGL)
        })
      },

      /**
       * @Description 添加标注点
       * @date 2021-03-08
       * @returns {any}
       */
      marker(BMapGL) {
        for (let index = 0; index < data.features.length; index++) {
          const element = data.features[index]
          const point = new BMapGL.Point(
            element.geometry.coordinates[0],
            element.geometry.coordinates[1]
          )

          state.circle = new BMapGL.Circle(point, 100, {
            fillColor: +element.type === 2 ? '#00cd00' : !+element.type ? '#fa3847' : '#f39800',
            strokeColor: +element.type === 2 ? '#00cd00' : !+element.type ? '#fa3847' : '#f39800',
            strokeOpacity: 0.2,
            strokeStyle: 'solid',
            strokeWeight: 8,
          })

          //   state.marker = new BMapGL.Marker(point, Circle)

          state.map.addOverlay(state.circle)
          methods.setInfoWindow(BMapGL, point, element)
        }

        // var options = {
        //   color: 'rgb(0,205,0)',
        //   size: 32,
        //   //   shape: BMAP_POINT_SHAPE_WATERDROP,
        // }
        // var pointCollection = new BMapGL.PointCollection(points, options) // 初始化PointCollection
        // state.map.addOverlay(pointCollection)
        // pointCollection.addEventListener('click', function (e) {
        //   const myIcon = new BMapGL.Icon(
        //     pic,
        //     new BMapGL.Size(60 * 0.5, 83 * 0.5)
        //   )
        //   // 通过点击的坐标创建一个点对象，添加标签
        //   var point = new BMapGL.Point(e.point.lng, e.point.lat)
        //   state.marker = new BMapGL.Marker(point, { icon: myIcon })
        //   state.map.addOverlay(state.marker)
        //   var opts = {
        //     title: '经纬度详情：',
        //     enableMessage: false,
        //   }
        //   var infowindow = new BMapGL.InfoWindow(
        //     '经 纬 度 详 情' +
        //       '<br/>lng：' +
        //       e.point.lng +
        //       '<br/>lat' +
        //       e.point.lat,
        //     opts
        //   )
        //   state.map.openInfoWindow(infowindow, point)
        // })
        //   methods.setInfoWindow(pointCollection, points)
      },

      eventListener(BMapGL, point) {
        state.circle.addEventListener('click', function () {
          state.circle.removeEventListener('click', () => {})
          state.map.removeOverlay(state.marker)

          const myIcon = new BMapGL.Icon(
            pic,
            new BMapGL.Size(60 * 0.4, 83 * 0.4)
          )
          state.marker = new BMapGL.Marker(point, {
            icon: myIcon,
          })

          state.map.addOverlay(state.marker)

          state.map.openInfoWindow(state.infoWindow, point) //开启信息窗口
        })
      },

      /**
       * @Description 设置弹出信息窗口
       * @date 2021-03-08
       * @returns {any}
       */
      setInfoWindow(BMapGL, point, item) {
        const opts = {
          width: 200,
          height: 100,
          title: 'title',
        }
        state.infoWindow = new BMapGL.InfoWindow(item.type, opts)

        methods.eventListener(BMapGL, point)
      },
    }

    return {
      ...toRefs(state),
    }
  },
})
</script>

<style lang="less" scoped>
.map-container {
  width: 100%;
  height: 100%;
}
</style>